<template>
    <!-- <div class="code-diff" id="code-diff" ref="codeDiffRef"></div> -->
    <CodeDiff :old-string="oldString" :new-string="newString" :file-name="fileName" output-format="side-by-side" />
</template>
  
<script setup>
import { CodeDiff } from 'v-code-diff'
// import { parse } from "diff2html";
// import "diff2html/bundles/css/diff2html.min.css";
// import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui";
// import { createTwoFilesPatch } from "diff";
// const { proxy } = getCurrentInstance();
// 过去对比json patch 文件
// const getDiffPatch = ({ oldFileName = '', newFileName = '', oldStr = '', newStr = '', oldHeader = '', newHeader = '', options }) => {
//     // 对比差异
//     const optionsValue = Object.assign({
//         context: 9999999,//describes how many lines of context should be included.
//     }, options)
//     const diffStr = createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr, oldHeader, newHeader, optionsValue);
//     return diffStr

// }
// const drawDiffHtml = (diffStr) => {
//     const diffJsonValue = parse(diffStr);
//     const diff2htmlUi = new Diff2HtmlUI(proxy.$refs.codeDiffRef, diffJsonValue, {
//         drawFileList: true, matching: "lines", showFiles: false, outputFormat: "side-by-side"
//     });
//     diff2htmlUi.draw();		//绘制页面
//     diff2htmlUi.highlightCode();	// 高亮数据
// }
const setStrValue = (str) => {
    if (Object.prototype.toString.call(str) === "[object String]") {
        return str
    }
    if (Object.prototype.toString.call(str) === "[object Object]") {
        return JSON.stringify(str, null, 2)
    }
    if (Object.prototype.toString.call(str) === "[object Array]") {
        return Arrays.toString(str)
    }
    return String(str)

}
const oldString = ref('')
const newString = ref('')
const fileName = ref('')
const diffJson = ({ oldFileName = '', newFileName = '', oldStr = '', newStr = '', oldHeader = '', newHeader = '', options }) => {
    oldString.value = setStrValue(oldStr);
    newString.value = setStrValue(newStr);
    // const diffStr = getDiffPatch({ oldFileName, newFileName, oldStr: setStrValue(oldStr), newStr: setStrValue(newStr), oldHeader, newHeader, options })
    // drawDiffHtml(diffStr);
}
defineExpose({ diffJson })
</script>
<style lang="scss" scoped>
.code-diff {
    width: 100%;
}

:deep(.d2h-file-collapse) {
    white-space: nowrap;
}
</style>
